<template>
  <!--遮罩弹出层-->
    <div class="shadebg">
        <div class="loginBox">
            <div class="alphaBr">
                <div class="loginWrap pr">
                    <ul class="clearfix ">
                        <li  class="fl" v-for="(item,index) in loginBox" @click="actived">
                          <a class="loginTitel" :class="{curTitle: myindex==index}">{{item}}</a>
                        </li>
                        <!-- <li @click="actived" class="fl"><a class="loginTitel">注册</a></li> -->
                    </ul>
                    <div class="pt30 pb30 pl20 pr20">
                        <!-- 登录 -->
                        <ul v-if="myindex===0">
                            <li class="mb20 b87 clearfix "><i class="fl w40 h40 lh40  br_ddd account_icon"></i><input class="fl w438 h40 f12 t1 c40" autofocus type="text" v-model='user_name' placeholder="请输入手机号/用户昵称"/></li>
                            <li class="mb40 b87 clearfix"><i class="fl w40 h40 lh40  br_ddd password_icon"></i><input class="fl w438 h40 f12 t1 c40" type="password" v-model='user_ps' placeholder="请输入密码"/></li>
                            <li class="mb20 clearfix"><button @click="login" class="fl w482 h40 bg_grn_119c5b  c100 f16  pointer hoverbg_org letter2">登录</button></li>
                            <li class="clearfix"><a class="c60 f12 unl fr hoverfont_org">忘记密码</a></li>
                        </ul>
                        	<!-- 注册  -->
                        <ul v-else>
                            <li class="mb20 b87 clearfix">
                                <i class="fl inline-block w40 h40 lh40 vm br_ddd account_icon"></i>
                                <input class=" fl w438 h40 vm f12 t1 c40" autofocus type="text" v-model="userName" placeholder="请输入用户昵称"/>
                            </li>
                            <li class="mb20 b87 clearfix">
                                <i class="fl inline-block w40 h40 lh40 vm br_ddd password_icon"></i>
                                <input class="fl w438 h40 vm f12 t1 c40" type="password" v-model="passWord" placeholder="请输入密码"/>
                            </li>
                            <li class="mb20 b87 clearfix">
                                <i class="fl inline-block w40 h40 lh40 vm br_ddd password_icon"></i>
                                <input class="fl w438 h40 vm f12 t1 c40" type="password" v-model="rePassWord" placeholder="请确认密码"/>
                            </li>
                            <li class="mb20 b87 clearfix">
                                <i class="fl inline-block w40 h40 lh40 vm br_ddd phone_icon"></i>
                                <input class=" fl w438 h40 vm f12 t1 c40" type="text" v-model="phoneNumber" placeholder="请输入手机号"/>
                            </li>
                            <li class="mb20 clearfix ">
                                <i class="fl inline-block w40 h40 lh40 vm br_ddd testCode_icon b87"></i>
                                <input class="fl w220 h40 b87  vm f12 t1 c40 mr10" style="border-left:none;" type="text" value="" v-model="code" placeholder="请输入验证码"/>
                                <button @click='message' class="fl pr10 pl10 h40 f12  bg97 c50 b80 br4 hoverbg_org"  >获取验证码</button>
                            </li>
                            <li class="mb20 clearfix">
                                <button @click="Register" class="fl w482 h40 bg_grn_119c5b  c100 f16  pointer hoverbg_org letter2">注册</button>
                            </li>
                        </ul>
                    </div>
                    <button @click="closePopup" class="closeX pointer "></button>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import axios from 'axios'
import md5 from 'crypto-js/md5'
import Util from '../assets/Util'
import store from '../store/store'
export default {
  components: {
  },
  props:{
    showindex:{
      type:Number
    }
  },
  data () {
    return {
        // activeName: 'first'
        loginBox:['登录', '注册'],
        myindex:this.showindex,
        // show:true,
        // 注册
        passWord:'',
        userName:'',
        phoneNumber:'',
        code:'',
        rePassWord:'',
        // 登录
        user_name:'',
        user_ps:''
    }
  },
  methods: {
      actived(){
          this.myindex = Math.abs(this.myindex - 1);
      },
      closePopup(){
          this.$emit('toggle', 1);
      },
      Register(e){
          e.stopPropagation();
          if (this.userName === ''){
            this.$message.warning("3~25个字符");
            return false
          }
          if (this.passWord === '') {
            this.$message.warning('请输入密码');
            return false
          }
          if (this.rePassWord === '') {
            this.$message.warning('请再次输入密码');
            return false
          }
          if(this.passWord !== this.rePassWord){
            this.$message.warning('两次密码输入不一样');
            return false
          }
          if (this.phoneNumber === '') {
            this.$message.warning('请输入手机号');
            return false
          }
          if (this.code === '') {
            this.$message.warning('请输入验证码');
            return false
          }
          let regProps = {
            url:"/user/Register",
            data:{
              "password": this.setmd5(this.phoneNumber, this.passWord),
              "nickName": this.userName,
              "userName":this.phoneNumber,
              "mobile": this.phoneNumber,
              "mobilePassword": this.setmd5(this.phoneNumber, this.passWord),
              "code": this.code
            },
            sCallBack:res => {
              if(res.data.code === 1){
                this.actived();
                this.$message.success("注册成功，请登录");
              }else{
                this.$message.error(res.data.message);
              }
              console.log(res);
            },
            eCallBack:err => {
              this.$message.error("注册失败");
              console.log(err);
            }
          }
          Util.myRequest(regProps);
      },
       login(e){
           e.stopPropagation();
           let loginProps = {
             url:"/User/login",
             data:{
               "userName":this.user_name,
               "password": this.setmd5(this.user_name, this.user_ps),
               "clientType": "PC",
               "imgUrl": ""
             },
             sCallBack:(res) => {
               let loginInfo = res.data;
               if(loginInfo.code === 1){
                 store.commit("setHeadPic", loginInfo['data']['imgUrl']);
                 store.commit("setNickName", loginInfo['data']['nickName']);
                 store.commit("setSex", loginInfo['data']['sex']);
                 store.commit("setPhoneNumber", loginInfo['data']['mobile']);
                 localStorage.setItem("token", loginInfo['data']['token']);
                 localStorage.setItem("userHeadPic", loginInfo['data']['imgUrl']);
                 localStorage.setItem("userNickName", loginInfo['data']['nickName']);
                 localStorage.setItem("uId", loginInfo['data']['id']);
                 this.$message({
                   message: '恭喜你，登录成功',
                   type: 'success',
                   duration: 1000
                 });
                 this.closePopup();
                 this.$emit("islogin");
               }else{
                 this.$message.error(loginInfo['message']);
               }
             },
             eCallBack:(err) => {
                console.log(err);
             }
           };
           Util.myRequest(loginProps);
      },
      message(e){
          e.stopPropagation();
          let smsProps = {
            url:'/Sms/SendRegisterCode',
            data:{
              mobile:this.phoneNumber
            },
            sCallBack:res => {
              if(res.data.code === 1){
                  this.$message.success("验证码发送成功");
              }else{
                  this.$message.warning(res.data.message);
              }
            },
            eCallBack:err => {
              this.$message.error("验证码发送失败");
              console.log(err);
            }
          }
          Util.myRequest(smsProps);
      },
      // md5加密转换
      setmd5(user, password){
        return md5(user + password).toString()
      }
  }
}
</script>
<style lang="less" scoped>
    .clearfix{
        .fl{
            cursor: pointer;
        }
    }
    .alphaBr .clearfix input{
       cursor: text;
    }
    .loginTitel{
        width:250px;
    }
    .shadebg{
        position: fixed;
    }
</style>
